<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" style="min-height: 100vh">
			 <!-- #ifdef APP-PLUS -->
			 <view class="statusbox"></view>
			 <!-- #endif -->
			<view class=""
				style="width: 100%;margin:20rpx auto;background-color: #ffffff;z-index: 99; ">
				<view style="width: 90%;margin:20rpx auto 20rpx;display: flex;justify-content: space-between;align-items: center;">
					<view class="head_name" @click="getUp">
						<image src="@/static/ai/arrows.png" style="width: 42.3rpx;" mode="widthFix"></image>
					</view>
					<view class="hade_input">
						<view class="hade_icon">
							<image src="@/static/ai/sou.png" style="width: 35rpx;" mode="widthFix"></image>
						</view>
					
						<input type="text" class="search_input" v-model="search_name" @confirm="search" placeholder="搜索比赛场次"
							placeholder-class="color-6">
					
					</view>
					<view class="search_name" @click="selskipUser()">
						搜索
					</view>
				</view>
			
			</view>

			<view class="" style="width: 699rpx;margin: 20rpx auto;" v-for="item in eList">
				<view class="" style="width: 690rpx;position: relative;">
					<view class="">
						<image :src="item.themeImage" style="border-radius: 16rpx;width: 690rpx;height: 600rpx" mode="">
						</image>
					</view>
					<view class=""
						style="width: 115rpx; text-align: center;top: 20rpx;left: 20rpx;position: absolute;color: #FF4B2B;border-radius: 50rpx;padding: 4rpx;">

						<image v-if='item.status==1' class='icon' src="@/static/ai/finish.png" mode=""></image>
						<image v-if='item.status==2' class='icon' src="@/static/ai/subscribe.png" mode=""></image>
						<image v-if='item.status==3' class='icon' src="@/static/ai/conduct.png" mode=""></image>
						<image v-if='item.status==4' class='icon' src="@/static/ai/unopen.png" mode=""></image>
					</view>
					<!-- 预约中的比赛，显示开始时间（时分）；进行中的比赛显示结束时间（时分）；未开放和已结束的比赛不显示 -->
					<!-- 比赛状态 1->未开始 2->预约参赛 3->比赛进行中  4->比赛结束 -->
					<view class="mess_date" v-if="item.status==2 && item.signupEndTime!='00:00:00'" style="">
						距离开赛时间:{{item.signupEndTime}}
					</view>
					<view class="mess_date" v-if="item.status==3 && item.voteEndTime!='00:00:00'" style="">
						距离结束时间:{{item.voteEndTime}}
					</view>

					
										<view
											style="position: absolute;bottom:0;display: flex;width: 690rpx;background: linear-gradient(0deg, #FFFFFF, rgba(255,255,255,0.7), rgba(255,255,255,0.25));
					box-shadow: 1rpx 5rpx 16rpx 0rpx #EFEFEF;padding: 20rpx;">
												<view class="" >
													<view class=""
														style="width: 479rpx;font-size: 32rpx;font-weight: 500;color: #333333;line-height: 52rpx;">
														场次编号：{{item.eventName}}
													</view>
													<view class=""
														style="width: 479rpx; margin-top: 8rpx;font-size: 32rpx;font-weight: 500;color: #333333;">
														比赛主题：{{item.theme}}
													</view>
															<view class="linkfn" v-if="item.investor">
																<image src="@/static/ai/wicon.png" style="width: 26rpx;margin: 0 8rpx ;"
																	mode="widthFix"></image><text> 赋能方：{{item.investor}}</text>
													</view>
												
										
											</view>
											<!--status  1->未开始 2->预约参赛 3->比赛进行中  4->比赛结束  -->
											<view class="" :style="{backgroundColor:((item.status== '2' || item.status=='3' )?' #AA56D7':' #ccadf7')}" @tap="finishClick(item.status,item.id)"
												style=" margin-top: 28rpx;width: 112rpx;height: 112rpx;border-radius: 62rpx;">
												<view class=""
													style="width: 112rpx;text-align: center;height: 112rpx;font-size: 32rpx;font-weight: 600;line-height: 110rpx;color: #FFFFFF;">
													<text v-if="item.status==1">未开放</text>
													<text v-if="item.status==2">预约</text>
												<text v-if="item.status==3">
														<text v-if='item.evolveStatus==2'>参赛</text>
														<text v-else-if='item.evolveStatus==3'>投票</text>
														<text  v-else>进行中</text>
													    </text>
													<text v-if="item.status==4  || item.status==null">结束</text>
												</view>
					
											</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eList: [],
				list: [],
				search_name: "",
				pageNo: 1,
				pageSize: 10,
				interval_list: [],
				interval_list2: [],
				recently: 1,
				hasNextPage: false
			}
		},
		onReachBottom() {
			if (this.hasNextPage) {
				this.pageNo = this.pageNo + 1;
				this.skipUser()
			}
		},
		onPullDownRefresh() {

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
			this.pageNo =1
			this.eList=[];
		this.skipUser()
	 
		},
		onLoad() {
			
		},
		methods: {
			selskipUser(){
				this.pageNo=1
				this.eList=[];
				this.skipUser()
			},
			search(){},
			
			skipUser() {
				var data = {
					eventName: this.search_name,
					recently: '', //this.tabCurrent
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				this.$api.getAiEventList(data, res => {
					if (res.status) {
						this.eList = this.eList.concat(res.data.list);
						let nowTime = new Date().getTime();
						this.interval_list = {}; // 使用对象来存储定时器  
						this.interval_list2 = {};
						this.hasNextPage = res.data.list.length >= this.pageSize;

						for (let i = 0; i < this.eList.length; i++) {
							let item = this.eList[i];
							let isValidVoteEndTime = this.isValidDate(item.voteEndTime);
							let isValidSignupBeginTime = this.isValidDate(item.signupEndTime);

							if (!isValidVoteEndTime || !isValidSignupBeginTime) {
								continue; // 或者处理无效日期的情况  
							}

							let vTime = new Date(item.voteEndTime).getTime();
							let sTime = new Date(item.signupEndTime).getTime();

							let timeleft = isValidVoteEndTime ? (vTime - nowTime) / 1000 : 0;
							let timeleftsig = isValidSignupBeginTime ? (sTime - nowTime) / 1000 : 0;

							item.voteEndTime = this.formatTime(timeleft);
							item.signupEndTime = this.formatTime(timeleftsig);

							// 使用对象属性作为定时器ID的键  
							this.interval_list[i] = setInterval(() => {
								let currentTime = new Date().getTime();
								let newTimeleft = (vTime - currentTime) / 1000;
								if (newTimeleft < 0) {
									item.voteEndTime = '00:00:00';
									clearInterval(this.interval_list[i]);
								} else {
									item.voteEndTime = this.formatTime(newTimeleft);
								}
							}, 1000);

							this.interval_list2[i] = setInterval(() => {
								let currentTime = new Date().getTime();
								let newSigTimeleft = (sTime - currentTime) / 1000;
								if (newSigTimeleft < 0) {
									clearInterval(this.interval_list2[i]);
								} else {
									item.signupEndTime = this.formatTime(newSigTimeleft);
								}
							}, 1000);
						}
					}
				})
			},
			finishClick(val, id) {

				if (val == 4 || val == 2 || val == 3) {
					uni.navigateTo({
						url: '/pages/aipicture/finish/finish?id=' + id
					})
				}


			},
			// 辅助函数来检查日期字符串是否有效  
			isValidDate(dateStr) {
				const date = new Date(dateStr);
				return !isNaN(date.getTime());
			},
			// 假设 $common.time2date 已经被替换或重命名为 formatTime  
			formatTime(seconds) {
				// 这里应该是将秒数转换为时间字符串的逻辑  
				// 如果 seconds 是 NaN 或负数，则返回 '00:00:00' 或其他合适的默认值  
				if (isNaN(seconds) || seconds < 0) {
					return '00:00:00';
				} else {
					return this.$common.time2date(seconds);
				}
			},
			getUp() {
				uni.navigateTo({
					url: '/pages/aipicture/aipicture'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {}
   .statusbox {
			height: var(--status-bar-height);
		}
	.head_name {
		font-weight: bold;

	}

	.hade_input {
		width: 508rpx;
		display: flex;
		align-items: center;
		height: 82rpx;
		background: #F5F4FF;
		border-radius: 36rpx;
	}

	.head_link {
		// width: 1rpx;
		height: 37rpx;
		border: 1px solid #BFBFBF;
	}

	.hade_icon {
		margin: 0 20rpx;
		padding-top: 10rpx;
	}

	.search_name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.search_input {
		flex: 1;
		height: 80rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.mess_class {
		width: 500rpx;
		height: 270rpx;
		background: #F8F6FF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-right: 20rpx;

	}

	.mess_link {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.mess_name {
		margin-top: 2rpx;
		width: 454rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #6958D5;
	}


	.mess_state {
		width: 100rpx;
		height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		font-weight: 400;
		margin-top: -14px;
		margin-right: -14px;
		line-height: 48rpx;
		border-radius: 5rpx 30rpx 5rpx 30rpx;
		color: rgb(255, 255, 255);
		background: linear-gradient(135deg, #7257EE, #ab01ee);
	}

	.mess_ranking {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.mess_ticket {
		font-size: 30rpx;
		font-weight: bold;
		// color: #673DE7;
		line-height: 30rpx;
	}

	.mess_tz {
		margin-top: 27rpx;
		// width: 364rpx;
		font-size: 26rpx;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.mess_name {
		margin-top: 2rpx;
		width: 454rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #6958D5;
	}

	.mess_date {
		// width: 224rpx;
		padding: 0 16rpx;
		height: 42rpx;
		text-align: center;
		top: 20rpx;
		right: 20rpx;
		position: absolute;
		border-radius: 20rpx;
		color: white;
		background: #000;
		// background: url('@/static/aipicture/black.png') no-repeat;
	}
	.linkfn{
		display: inline-block;
			margin-top: 14rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			border-radius:30rpx;padding: 0rpx 20rpx 0 10rpx;line-height: 1.7;
		 background: linear-gradient(135deg, #7257EE ,#ab01ee);
	}
</style>